<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>公告详情 - 农业服务平台</title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="../favicon.ico">
    <link rel="icon" type="image/png" href="../images/logo.png">
    
    <script src="../js/tailwindcss-3.4.17.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#10b981',
                        'primary-dark': '#059669',
                        'primary-light': '#34d399',
                        secondary: '#06b6d4',
                        accent: '#f59e0b',
                        danger: '#ef4444',
                        success: '#10b981',
                        neutral: '#f9fafb',
                        'neutral-dark': '#f3f4f6',
                        'text-primary': '#1f2937',
                        'text-secondary': '#6b7280'
                    },
                    fontFamily: {
                        sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif']
                    },
                    boxShadow: {
                        'soft': '0 2px 8px rgba(0, 0, 0, 0.04)',
                        'medium': '0 4px 12px rgba(0, 0, 0, 0.08)',
                        'large': '0 8px 24px rgba(0, 0, 0, 0.12)',
                        'xl': '0 12px 32px rgba(0, 0, 0, 0.16)'
                    }
                }
            }
        }
    </script>
    
    <link rel="stylesheet" href="../css/all.min.css">
    <link rel="stylesheet" href="../css/common.css">
</head>
<body class="bg-gradient-to-br from-slate-50 via-gray-50 to-neutral">
    <div class="container-app shadow-2xl">
        <!-- 头部导航 -->
        <header class="glass-effect sticky top-0 z-20 border-b border-gray-100 shadow-soft">
            <div class="px-4 py-3 flex items-center justify-between">
                <button onclick="window.history.back()" class="w-10 h-10 rounded-xl hover:bg-gray-100 flex items-center justify-center transition-colors">
                    <i class="fa fa-arrow-left text-text-primary text-lg"></i>
                </button>
                <h1 class="text-base font-bold text-text-primary flex-1 text-center">公告详情</h1>
                <button class="w-10 h-10 rounded-xl hover:bg-gray-100 flex items-center justify-center transition-colors" onclick="shareAnnouncement()">
                    <i class="fa fa-share-alt text-text-primary text-lg"></i>
                </button>
            </div>
        </header>
        
        <main class="pb-6">
            <!-- 公告头部 -->
            <section class="px-4 pt-4">
                <div class="bg-white rounded-2xl p-5 shadow-soft border border-gray-100">
                    <!-- 图标和标题 -->
                    <div class="flex items-start gap-4 mb-4">
                        <div id="icon-container" class="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary to-primary-dark flex items-center justify-center flex-shrink-0 shadow-large">
                            <i id="announcement-icon" class="fa fa-bullhorn text-white text-3xl"></i>
                        </div>
                        <div class="flex-1 min-w-0">
                            <h2 id="announcement-title" class="text-lg font-bold text-text-primary mb-2 leading-tight">公告标题</h2>
                            <div id="announcement-type" class="inline-block px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">政策通知</div>
                        </div>
                    </div>
                    
                    <!-- 元信息 -->
                    <div class="flex items-center justify-between pt-4 border-t border-gray-100">
                        <div class="flex items-center gap-4 text-xs text-text-secondary">
                            <span><i class="fa fa-calendar-o mr-1"></i><span id="announcement-time">2024-01-15</span></span>
                            <span><i class="fa fa-eye mr-1"></i><span id="announcement-views">1.2k</span> 阅读</span>
                        </div>
                        <button class="px-3 py-1.5 bg-gray-100 text-text-secondary text-xs rounded-lg hover:bg-gray-200 transition-colors" onclick="CommonUtils.showToast('收藏功能开发中...', 'info')">
                            <i class="fa fa-star-o mr-1"></i>收藏
                        </button>
                    </div>
                </div>
            </section>

            <!-- 公告内容 -->
            <section class="px-4 pt-4">
                <div class="bg-white rounded-2xl p-5 shadow-soft border border-gray-100">
                    <div class="flex items-center gap-2 mb-4">
                        <div class="w-1 h-5 bg-primary rounded-full"></div>
                        <h3 class="text-base font-bold text-text-primary">公告内容</h3>
                    </div>
                    <div id="announcement-content" class="text-sm text-text-secondary leading-relaxed space-y-4">
                        <!-- 内容将通过JavaScript填充 -->
                    </div>
                </div>
            </section>

            <!-- 相关公告 -->
            <section class="px-4 pt-4">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-base font-bold text-text-primary">相关公告</h3>
                    <a href="./announcement.html" class="text-xs text-primary">查看更多 →</a>
                </div>
                <div class="space-y-3" id="related-announcements">
                    <!-- 相关公告将通过JavaScript生成 -->
                </div>
            </section>
        </main>
    </div>

    <script src="../js/common.js"></script>
    <script src="../js/animate.js"></script>
    <script>
        // 获取公告类型配置
        function getAnnouncementConfig(type) {
            const configs = {
                policy: {
                    icon: 'fa-bullhorn',
                    gradient: 'from-primary to-primary-dark',
                    bgColor: 'bg-primary/10',
                    textColor: 'text-primary',
                    label: '政策通知'
                },
                activity: {
                    icon: 'fa-gift',
                    gradient: 'from-accent to-orange-600',
                    bgColor: 'bg-accent/10',
                    textColor: 'text-accent',
                    label: '活动福利'
                },
                system: {
                    icon: 'fa-bell',
                    gradient: 'from-secondary to-cyan-600',
                    bgColor: 'bg-secondary/10',
                    textColor: 'text-secondary',
                    label: '系统通知'
                },
                important: {
                    icon: 'fa-volume-up',
                    gradient: 'from-purple-500 to-purple-700',
                    bgColor: 'bg-purple-500/10',
                    textColor: 'text-purple-600',
                    label: '重要公告'
                }
            };
            return configs[type] || configs.system;
        }

        // 模拟相关公告数据
        const relatedAnnouncements = [
            {
                id: 2,
                type: 'activity',
                title: '新用户注册福利活动',
                time: '昨天 10:15',
                views: '856'
            },
            {
                id: 3,
                type: 'system',
                title: '平台系统升级通知',
                time: '2天前',
                views: '2.3k'
            }
        ];

        // 渲染相关公告
        function renderRelatedAnnouncements(currentId) {
            const container = document.getElementById('related-announcements');
            const filtered = relatedAnnouncements.filter(item => item.id !== currentId);
            
            container.innerHTML = filtered.map(item => {
                const config = getAnnouncementConfig(item.type);
                return `
                    <a href="javascript:void(0)" onclick="navigateToDetail(${item.id})" class="bg-white rounded-2xl shadow-soft border border-gray-100 hover:shadow-medium transition-all block">
                        <div class="p-4">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 rounded-xl bg-gradient-to-br ${config.gradient} flex items-center justify-center flex-shrink-0">
                                    <i class="fa ${config.icon} text-white"></i>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <h4 class="text-sm font-bold text-text-primary mb-1 truncate">${item.title}</h4>
                                    <div class="flex items-center gap-3 text-xs text-text-secondary">
                                        <span><i class="fa fa-calendar-o mr-1"></i>${item.time}</span>
                                        <span><i class="fa fa-eye mr-1"></i>${item.views}</span>
                                    </div>
                                </div>
                                <i class="fa fa-chevron-right text-gray-400"></i>
                            </div>
                        </div>
                    </a>
                `;
            }).join('');
        }

        // 跳转到详情页
        function navigateToDetail(id) {
            // 实际应用中这里会从服务器获取数据
            CommonUtils.showToast('加载公告详情...', 'info');
            setTimeout(() => {
                window.location.reload();
            }, 500);
        }

        // 分享功能
        function shareAnnouncement() {
            CommonUtils.showToast('分享功能开发中...', 'info');
        }

        // 页面加载
        document.addEventListener('DOMContentLoaded', function() {
            // 从localStorage获取公告数据
            const announcementData = localStorage.getItem('currentAnnouncement');
            
            let announcement;
            if (announcementData) {
                announcement = JSON.parse(announcementData);
            } else {
                // 默认数据
                announcement = {
                    id: 1,
                    type: 'policy',
                    title: '2024年农业补贴政策发布',
                    content: '最新农业补贴政策已出台，符合条件的企业可申请相关补贴。\n\n一、补贴范围\n本次补贴政策主要包括以下几个方面：\n1. 种植补贴：对规模化种植的农业企业给予每亩50-200元的补贴\n2. 农机购置补贴：购买农业机械设备可享受30%-50%的补贴\n3. 绿色农业发展补贴：采用环保种植技术的企业可获得额外补贴\n4. 科技创新补贴：农业技术研发和应用可获得专项资金支持\n\n二、申请条件\n1. 在本地区注册的农业企业或合作社\n2. 具有合法的土地使用权或经营权\n3. 符合环保和质量安全标准\n4. 有完整的财务和经营记录\n\n三、申请流程\n1. 登录平台提交申请材料\n2. 相关部门进行资格审核\n3. 通过审核后进行现场核查\n4. 公示无异议后发放补贴\n\n四、注意事项\n1. 申请材料必须真实有效\n2. 补贴资金专款专用\n3. 接受相关部门的监督检查\n4. 如有违规行为，将追回补贴并处罚\n\n如有疑问，请咨询当地农业部门或平台客服。',
                    time: '今天 14:30',
                    views: '1.2k'
                };
            }

            const config = getAnnouncementConfig(announcement.type);
            
            // 更新图标
            const iconContainer = document.getElementById('icon-container');
            iconContainer.className = `w-16 h-16 rounded-2xl bg-gradient-to-br ${config.gradient} flex items-center justify-center flex-shrink-0 shadow-large`;
            document.getElementById('announcement-icon').className = `fa ${config.icon} text-white text-3xl`;
            
            // 更新内容
            document.getElementById('announcement-title').textContent = announcement.title;
            document.getElementById('announcement-type').textContent = config.label;
            document.getElementById('announcement-type').className = `inline-block px-3 py-1 ${config.bgColor} ${config.textColor} text-xs rounded-full`;
            document.getElementById('announcement-time').textContent = announcement.time;
            document.getElementById('announcement-views').textContent = announcement.views;
            
            // 格式化内容（将换行符转换为段落）
            const contentContainer = document.getElementById('announcement-content');
            const paragraphs = announcement.content.split('\n\n');
            contentContainer.innerHTML = paragraphs.map(p => {
                if (p.trim()) {
                    // 检查是否为列表项
                    if (p.includes('\n') && /^\d+\./.test(p.split('\n')[0])) {
                        const lines = p.split('\n').filter(line => line.trim());
                        const title = lines[0];
                        const items = lines.slice(1);
                        return `
                            <div>
                                <p class="font-bold mb-2">${title}</p>
                                <ul class="space-y-2 ml-4">
                                    ${items.map(item => `
                                        <li class="flex items-start gap-2">
                                            <span class="w-1.5 h-1.5 rounded-full bg-primary mt-1.5 flex-shrink-0"></span>
                                            <span class="flex-1">${item}</span>
                                        </li>
                                    `).join('')}
                                </ul>
                            </div>
                        `;
                    } else {
                        return `<p>${p.replace(/\n/g, '<br>')}</p>`;
                    }
                }
                return '';
            }).join('');
            
            // 渲染相关公告
            renderRelatedAnnouncements(announcement.id);
            
            // 初始化按钮反馈
            CommonUtils.initButtonFeedback();
        });
    </script>
</body>
</html>
